<script lang="ts" setup>
import dayjs from 'dayjs';
import { reactive, onMounted } from 'vue';
import { getCurrentInstance } from '@tarojs/taro';
import { QUERY_CHANGE_ALTER_DETAIL } from '/@/api/modules/equipment/asset-change-alter';
import {
  ASSET_CHANGE_ALTER_TYPE,
  ASSET_CHANGE_ALTER_STATUS,
  ASSET_CHANGE_ALTER_STATUS_COLOR,
  ASSET_CHANGE_ALTER_STATUS_BG_COLOR,
} from '/@/common/constant';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  id: string;
};

const state = reactive<{
  info: AppSysAssetChange.Dto;
}>({
  info: {},
});

onMounted(() => {
  QUERY_CHANGE_ALTER_DETAIL({ changeId: params.id }).then((res) => {
    state.info = res.content;
  });
});
</script>

<template>
  <view class="asset-alter-detail app-page--1">
    <app-navbar title="变更详情" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="asset-alter-detail__wrapper">
        <nut-cell-group>
          <nut-cell center>
            <template v-slot:title>
              <view class="asset-alter-detail__module-title">变更详情</view>
            </template>
            <template v-slot:link>
              <text
                class="asset-alter-detail__status"
                :style="{
                  color: state.info.changeStatus
                    ? ASSET_CHANGE_ALTER_STATUS_COLOR[state.info.changeStatus]
                    : '#999',
                  backgroundColor: state.info.changeStatus
                    ? ASSET_CHANGE_ALTER_STATUS_BG_COLOR[state.info.changeStatus]
                    : '#999',
                }"
              >
                {{
                  state.info.changeStatus ? ASSET_CHANGE_ALTER_STATUS[state.info.changeStatus] : '-'
                }}
              </text>
            </template>
          </nut-cell>
          <nut-cell title="变更单号" :desc="state.info.changeCode || '-'" />
          <nut-cell
            title="变更时间"
            :desc="
              state.info.changeTime
                ? dayjs(Number(state.info.changeTime)).format('YYYY/MM/DD')
                : '-'
            "
          />
          <nut-cell
            title="变更状态"
            :desc="state.info.alterType ? ASSET_CHANGE_ALTER_TYPE[state.info.alterType] : '-'"
          />
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <view class="asset-alter-detail__module-title">设备明细</view>
          </nut-cell>
          <nut-cell>
            <nut-table
              class="asset-alter-edit__table"
              bordered
              striped
              :columns="[
                { title: '设备编号', key: 'assetCode' },
                { title: '设备名称', key: 'assetName' },
                { title: '所属部门', key: 'assetDeptName' },
              ]"
              :data="state.info.changeListDtoList"
            />
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <view class="asset-alter-detail__module-title">变动轨迹</view>
          </nut-cell>
          <nut-cell>
            <app-asset-change-operate-list :list="state.info.changeOperateDtoList" />
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
